<template>
  <div class="newTeachingProgram">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增课程教学大纲</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="form" :model="form" label-width="100px" class="content fixed-form">
      <el-form-item label="修订时间">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.time" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="修订人">
        <el-input v-model="form.revised" placeholder="请输入修订人"></el-input>
      </el-form-item>
      <el-form-item label="课程教学大纲">
        <el-upload
            class="upload-demo"
            action="http://localhost:8080/TeachingMIS/teachingProgram/uploadProgram"
            :on-success="setFileID">
            <el-button size="small" type="primary">点击上传</el-button>
         </el-upload>
      </el-form-item>
      <el-form-item label="是否使用">
        <el-switch
          v-model="isUse"
          on-text="是"
          off-text="否"
          @change="getIsUse">
        </el-switch>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="6" v-model="form.remark1"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'newTeachingProgram',
    data () {
      return {
        form: {
          courseID: '',
          fileID: '',
          time: '',
          revised: '',
          isUse: '',
          remark1: ''
        },
        isUse: false,
        url: 'http://localhost:8080/TeachingMIS'
      }
    },
    created(){
        this.getCourseID()
    },
    methods: {
      getCourseID(){
        this.form.courseID = this.$route.query.courseID;
        this.form.courseName = this.$route.query.courseName;
      },
      onSubmit() {
        this.$http.post(`${this.url}/teachingProgram/addProgram`, this.form).then((res) => {
          console.log("提交成功");
          alert("提交成功");
        }, (err) => {
          console.log("服务器异常！");
          alert("提交失败");
        })
      },
      setFileID(fileID,file){
        	alert(fileID);
        	this.form.fileID=fileID;
        	alert(this.form.fileID);
      },
      getIsUse(val){
        this.isUse ? this.form.isUse = '是' : this.form.isUse = '否';
        console.log(this.form.isUse)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
